{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>云招网 &mdash; 找到属于您的工作</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,700,900|Roboto+Mono:300,400,500"> 
    <link rel="stylesheet" href="/static/html/fonts/icomoon/style.css">

    <link rel="stylesheet" href="/static/html/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/html/css/magnific-popup.css">
    <link rel="stylesheet" href="/static/html/css/jquery-ui.css">
    <link rel="stylesheet" href="/static/html/css/owl.carousel.min.css">
    <link rel="stylesheet" href="/static/html/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="/static/html/css/bootstrap-datepicker.css">
    <link rel="stylesheet" href="/static/html/css/animate.css">
    
    
    <link rel="stylesheet" href="/static/html/fonts/flaticon/font/flaticon.css">
    <link rel="stylesheet" href="/static/html/css/fl-bigmug-line.css">
  
    <link rel="stylesheet" href="/static/html/css/aos.css">

    <link rel="stylesheet" href="/static/html/css/style.css">
    
  </head>
  <body>
  
  <div class="site-wrap">

    <div class="site-mobile-menu">
      <div class="site-mobile-menu-header">
        <div class="site-mobile-menu-close mt-3">
          <span class="icon-close2 js-menu-toggle"></span>
        </div>
      </div>
      <div class="site-mobile-menu-body"></div>
    </div> <!-- .site-mobile-menu -->
    
    
    <header class="site-navbar py-1" role="banner">

      <div class="container">
        <div class="row align-items-center">
          
          <div class="col-6 col-xl-2">
            <h1 class="mb-0"><a href="{% url 'main' %}" class="text-black h2 mb-0">云招网</a></h1>
          </div>

          <div class="col-10 col-xl-10 d-none d-xl-block">
            <nav class="site-navigation text-right" role="navigation">

              <ul class="site-menu js-clone-nav mr-auto d-none d-lg-block">
                <li><a href="{% url 'company_main' %}">首页</a></li>
                <li><a href="{% url 'company_index' %}">招聘广场</a></li>

                 {% if request.session.is_login %}
                <li class="dropdown">
                    <a href="#" class="rounded bg-primary py-2 px-3 text-white" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ cname }} <span class="caret"></span></a>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                        <li><a href="{% url 'company_message' %}">接收到的简历信息</a></li>
                        <li><a href="{% url 'showcompany_job' %}">我发布的招聘信息</a></li>

                    </ul>
                </li>
                <li><a class="rounded bg-danger py-2 px-3 text-white" href="{% url 'logout' %}" >退出登录</a></li>
                  {% else %}
                  <li><a href="{% url 'login' %}">登录/注册</a></li>
                  {% endif %}

              </ul>
            </nav>
          </div>
        </div>
      </div>
      
    </header>

    <div class="site-section bg-light" style="padding-bottom: 10px">
      <div class="container">
        <div class="row justify-content-start text-left mb-5">
          <div class="col-md-9" data-aos="fade">
            <h2 class="font-weight-bold text-black">岗位筛选</h2>
                <form class="form-inline my-2 my-lg-0" method="post" action="">
                                                {% csrf_token %}
                    人才搜索：<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="p">
                     <button class="btn btn-outline-success my-2 my-sm-0" type="submit" name="search" >Search</button>
                </form>

          </div>

        </div>
      </div>
    </div>

<div class="site-section bg-light" style="padding-top: 10px">
      <div class="container">
        <div class="row" data-aos="fade">
         <div class="col-md-12">
        {% for usermsg in contacts %}
           <div class="job-post-item bg-white p-4 d-block d-md-flex align-items-center">

              <div class="mb-4 mb-md-0 mr-5">
               <div class="job-post-item-header d-flex align-items-center">
                 <h2 class="mr-3 text-black h4">{{ usermsg.Professional }}</h2>
                   <h2 class="bg-warning text-white badge py-2 px-4">{{ usermsg.age }}<span>岁</span></h2>&nbsp;&nbsp;&nbsp;
                   <h2 class="bg-danger text-white badge py-2 px-4">{{ usermsg.max_deu }}</h2>

               </div>
               <div class="job-post-item-body d-block d-md-flex">
                 <div class="mr-3"><span class="fl-bigmug-line-planetary2"></span> <a href="https://www.baidu.com/s?wd={{ usermsg.col_name }}">{{ usermsg.col_name }}</a></div>
                 <div><span class="fl-bigmug-line-big104"></span> <span>{{ usermsg.address }}</span></div>
               </div>
              </div>
                      <div class="ml-auto">
        {#                <a href="#" class="btn btn-secondary rounded-circle btn-favorite text-gray-500"><span class="icon-heart"></span></a>#}
                        <a href="{% url 'company_single' %}?id={{ usermsg.id }}" class="btn btn-primary py-2">详细了解</a>
                      </div>
                   </div>
                {% endfor %}
                 </div>
                </div>
              </div>
        </div>




              <div class="row mt-5">
                  <div class="col-md-12 text-center">
                    <div class="site-block-27" >
                        <div class="d-flex justify-content-center">
                            <!-- 分页导航条 -->
                            <div class="pagination">
                                <span class="step-links">
                                    {% if contacts.has_previous %}
                                        <a href="?page=1">&laquo; 第一页</a>
                                        <a href="?page={{ contacts.previous_page_number }}">上一页</a>
                                    {% endif %}

                                    <span class="current">
                                        页码: {{ contacts.number }} / {{ contacts.paginator.num_pages }}
                                    </span>

                                    {% if contacts.has_next %}
                                        <a href="?page={{ contacts.next_page_number }}">下一页</a>
                                        <a href="?page={{ contacts.paginator.num_pages }}">最后一页 &raquo;</a>
                                    {% endif %}
                                </span>
                            </div>
                        </div>
                    </div>
                  </div>
                </div>




      </div>
    </div>    


    <footer class="site-footer">
      <div class="container">
        

        <div class="row">
          <div class="col-lg-9">
            <div class="row">
              <div class="col-6 col-md-3 col-lg-3 mb-5 mb-lg-0">
                <h3 class="footer-heading mb-4">For Candidates</h3>
                <ul class="list-unstyled">
                  <li><a href="#">Register</a></li>
                  <li><a href="#">Find Jobs</a></li>
                  <li><a href="#">News</a></li>
                  <li><a href="#">Search Jobs</a></li>
                  <li><a href="#">Contact</a></li>
                  <li><a href="#">Careers</a></li>
                </ul>
              </div>
              <div class="col-6 col-md-3 col-lg-3 mb-5 mb-lg-0">
                <h3 class="footer-heading mb-4">For Employers</h3>
                <ul class="list-unstyled">
                  <li><a href="#">Employer Account</a></li>
                  <li><a href="#">Clients</a></li>
                  <li><a href="#">News</a></li>
                  <li><a href="#">Find Candidates</a></li>
                  <li><a href="#">Terms &amp; Policies</a></li>
                  <li><a href="#">Careers</a></li>
                </ul>
              </div>
              <div class="col-6 col-md-3 col-lg-3 mb-5 mb-lg-0">
                <h3 class="footer-heading mb-4">Archives</h3>
                <ul class="list-unstyled">
                  <li><a href="#">January 2018</a></li>
                  <li><a href="#">February 2018</a></li>
                  <li><a href="#">March 2018</a></li>
                  <li><a href="#">April 2018</a></li>
                  <li><a href="#">May 2018</a></li>
                  <li><a href="#">June 2918</a></li>
                </ul>
              </div>
              <div class="col-6 col-md-3 col-lg-3 mb-5 mb-lg-0">
                <h3 class="footer-heading mb-4">Company</h3>
                <ul class="list-unstyled">
                  <li><a href="#">About</a></li>
                  <li><a href="#">Team</a></li>
                  <li><a href="#">Terms &amp; Policies</a></li>
                  <li><a href="#">Contact Us</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-lg-3">
            <h3 class="footer-heading mb-4">Contact Info</h3>
            <ul class="list-unstyled">
              <li>
                <span class="d-block text-white">Address</span>
                New York - 2398 10 Hadson Carl Street
              </li>
              <li>
                <span class="d-block text-white">Telephone</span>
                +1 232 305 3930
              </li>
              <li>
                <span class="d-block text-white">Email</span>
                info@yourdomain.com
              </li>
            </ul>
            
          </div>
        </div>

      </div>
    </footer>
  </div>

  <script src="/static/html/js/jquery-3.3.1.min.js"></script>
  <script src="/static/html/js/jquery-migrate-3.0.1.min.js"></script>
  <script src="/static/html/js/jquery-ui.js"></script>
  <script src="/static/html/js/popper.min.js"></script>
  <script src="/static/html/js/bootstrap.min.js"></script>
  <script src="/static/html/js/owl.carousel.min.js"></script>
  <script src="/static/html/js/jquery.stellar.min.js"></script>
  <script src="/static/html/js/jquery.countdown.min.js"></script>
  <script src="/static/html/js/jquery.magnific-popup.min.js"></script>
  <script src="/static/html/js/bootstrap-datepicker.min.js"></script>
  <script src="/static/html/js/aos.js"></script>

  <script>
      // This example displays an address form, using the autocomplete feature
      // of the Google Places API to help users fill in the information.

      // This example requires the Places library. Include the libraries=places
      // parameter when you first load the API. For example:
      // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

      var placeSearch, autocomplete;
      var componentForm = {
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
        postal_code: 'short_name'
      };

      function initAutocomplete() {
        // Create the autocomplete object, restricting the search to geographical
        // location types.
        autocomplete = new google.maps.places.Autocomplete(
            /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
            {types: ['geocode']});

        // When the user selects an address from the dropdown, populate the address
        // fields in the form.
        autocomplete.addListener('place_changed', fillInAddress);
      }

      function fillInAddress() {
        // Get the place details from the autocomplete object.
        var place = autocomplete.getPlace();

        for (var component in componentForm) {
          document.getElementById(component).value = '';
          document.getElementById(component).disabled = false;
        }

        // Get each component of the address from the place details
        // and fill the corresponding field on the form.
        for (var i = 0; i < place.address_components.length; i++) {
          var addressType = place.address_components[i].types[0];
          if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            document.getElementById(addressType).value = val;
          }
        }
      }

      // Bias the autocomplete object to the user's geographical location,
      // as supplied by the browser's 'navigator.geolocation' object.
      function geolocate() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var geolocation = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };
            var circle = new google.maps.Circle({
              center: geolocation,
              radius: position.coords.accuracy
            });
            autocomplete.setBounds(circle.getBounds());
          });
        }
      }
    </script>

  <script src="/static/html/js/main.js"></script>
    
  </body>
</html>